<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        padding: 0;
        height: 2000px;
        background-color: lightgray;
      }

      .fixed-nav {
        width: 85px;
        height: auto;
        position: fixed;
        right: 10px;
        top: 30%;
        background-color: white;
      }

      .fixed-nav .fixed-item {
        display: block;
        width: 85px;
        height: 85px;
        border-bottom: 1px solid lightgray;
        position: relative;
      }

      .fixed-nav .fixed-item:last-child {
        position: fixed;
        bottom: 10px;
        right: 10px;
        background-color: white;
      }

      .fixed-item img {
        position: absolute;
        background-size: cover;
        left: 50%;
        bottom: 49px;
        transform: translateX(-50%);
      }

      .fixed-nav .fixed-item:hover img {
        filter: brightness(0) saturate(100%) invert(60%) sepia(70%) saturate(3000%) hue-rotate(290deg) brightness(100%) contrast(100%);
        transition: filter 0.3s ease;
      }

      .fixed-item span {
        position: absolute;
        left: 50%;
        bottom: 17px;
        transform: translateX(-50%);
        font-size: 14px;
        font-weight: 500;
        color: black;
        text-align: center;
        white-space: nowrap;
      }

      .fixed-nav .fixed-item:hover span {
        color: #ff79b9;
      }
    </style>
  </head>
  <body id="top">
    <div class="fixed-nav">
      <a class="fixed-item">
        <img src="/src/img/nav/手机.png" alt="" />
        <span>手机APP</span>
      </a>
      <a class="fixed-item">
        <img src="/src/img/nav/头像.png" alt="" />
        <span>个人中心</span>
      </a>
      <a class="fixed-item">
        <img src="/src/img/nav/工具.png" alt="" />
        <span>售后服务</span>
      </a>
      <a class="fixed-item">
        <img src="/src/img/nav/客服.png" alt="" />
        <span>人工客服</span>
      </a>
      <a class="fixed-item">
        <img src="/src/img/nav/购物车.png" alt="" />
        <span>购物车</span>
      </a>
      <a class="fixed-item" href="#top">
        <img src="/src/img/nav/顶部.png" alt="" />
        <span>回到顶部</span>
      </a>
    </div>
  </body>
</html>
